本文配合以下文章食用效果更佳，更新第3条关于优化上传视频宽高度大于播放窗口宽高度时不能完整显示的问题：

限制PIX主题片刻Moment里超长图片完整显示 今天浏览首页，发现一个问题，前几天发了一个超长的图片，结果在首页默认全部显示，感觉非常的不美观。如下图黄色部分，这个仅仅显示了一半，还有一半因窗口问题未能一次性截图下来。 因此，想着把这种图片或者视频... 时间:2024/9/12 分类:技术相关

PIX主题发布片刻时，既可以上传视频到自己的服务器然后加以引用，也可以直接填入B站的BV加以引用。发布成功后，发现两个问题：

1、无论是上传的视频还是引用的B站视频，播放窗口高度太小，与宽度不协调；

2、B站视频会自动播放，如果这一页有多个B站视频，会同时播放。

3、上传视频宽高度大于播放窗口宽高度时不能完整显示。（20241201更新）

于是想着改造一下：

1、自己上传服务器的视频：

修改pix/inc/assets/css/main.css文件，找到

.pix_local_player {
    max-width: 400px;
    width: 100%;
    margin-top: 10px;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
}

把括号内第1行的400px修改为500px即可。

2、引用的B站视频：

修改同样的main.css文件，大概在上面代码的下方第三段，即

.pix_bili_player {
    position: relative;
    height: 0;
    padding-top: 45%;
    max-width: 400px;
    width: 100%;
    border-radius: 5px;
    overflow: hidden;
    margin-top: 10px;
}

把括号内第4行的400px修改为500px。

修改pix/inc/pix-type.php，大概631行找到

$html = '<div class="pix_bili_player"><iframe src="//player.bilibili.com/player.html?bvid='.$bvid.'&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" > </iframe></div>';

修改为：

$html = '<div class="pix_bili_player"><iframe src="//player.bilibili.com/player.html?bvid='.$bvid.'&page=1&autoplay=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="width:500px;height:100%;"> </iframe></div>';

这个一是配合CSS将宽度固定为500px，高度自适应，二是加入了autoplay=0，禁止B站视频自动播放。

3、修改pix/inc/assets/css/uikit.min.css文件，本文件为CSS代码压缩文件，可以自行搜索CSS压缩美化，先对uikit.min.css的全部代码进行美化后再修改，修改完毕压缩后替换原全部代码。

代码美化后在第86行：

canvas,img,svg,video {
      max-width:100%;
      height:auto;
      box-sizing: border-box
}

更改为以下代码：

canvas,img,svg {
      max-width:100%;
      height:auto;
	box-sizing: border-box
}

video {
      max-width:500px;      
      max-height:480px;
      width:auto;
      height:auto;
      display:block;
      margin-left:auto;
      margin-right:auto
}

清除缓存结束。

修改后上传视频和B站视频播放窗口如下：